class JDSwiper {
    constructor(obj) {
      console.log(obj);
      this.obj = obj;
      //获取到轮播图的整体的盒子的 选择器
      console.log(this.obj.el);
      // 控制是否自动播放
      console.log(this.obj.autoPlay);

      //获取box元素  整个轮播的 父元素
      this.box = document.querySelector(this.obj.el);
      // 要轮播的元素
      this.oLiItems = this.box.querySelectorAll(".item li");

      //记录当前显示的页面
      // 主要是为了让咱们 点击下一张的时候 知道 到底要哪个图片显示
      this.pageNum = 0;

      this.rightBtnEvent();
      this.leftBtnEvent();
      if (this.obj.autoPlay) {
        this.autoPlayEvent();
      }
      this.pagePointsEvent();

      this.showPointOfPageNum()
    }
    //1-右按钮
    rightBtnEvent() {
      // 找到右按钮
      // .box .rightBtn
      let rightBtn = this.box.querySelector(".rightBtn");
      console.log(rightBtn);
      // 点击事件

      //点击事件 中使用this 要注意，一般情况事件内的this就是 事件源btn
      let that = this;

      rightBtn.onclick = () => {
        //1
        this.next()
      };
    }
    //2-左按钮
    leftBtnEvent() {
        // 找到右按钮
      // .box .leftBtn
      let leftBtn = this.box.querySelector(".leftBtn");
      // 点击事件

      //点击事件 中使用this 要注意，一般情况事件内的this就是 事件源btn
      let that = this;

      leftBtn.onclick = () => {
        //1
        this.prev()
      };


    }
    // 3-自动播放
    autoPlayEvent() {
    

     let that = this;
     let timer =  setInterval(() => {
          this.next()
      }, 2000);

      //鼠标移入this.box 自动播放停止，移出 自动播放启动
      this.box.onmouseenter =  function(){
        clearInterval(timer)
      }
      this.box.onmouseleave=  ()=>{
        timer =  setInterval(() => {
            this.next()
        }, 2000);
      }


    }

    //4-焦点点击
    pagePointsEvent() {
        let pageLis = this.box.querySelectorAll('.page li');
        for(let i=0;i<pageLis.length;i++){
            pageLis[i].onclick = ()=>{

                //页码
                console.log('当前的页码'+this.pageNum)

                animate(this.oLiItems[this.pageNum], {
                    opacity: 0,
                });

                this.pageNum = i;
                console.log('将要显示的页码'+this.pageNum)

                animate(this.oLiItems[this.pageNum], {
                    opacity: 1,
                });

                this.showPointOfPageNum()
            }
        }

    }


    // next 下一页
    next() {
      // console.log("当前显示的是:", this.pageNum); //0
      // console.log(this.oLiItems);
      // this.oLiItems[this.pageNum].style.opacity = 0
      animate(this.oLiItems[this.pageNum], {
        opacity: 0,
      });

      // 播放下一下
      this.pageNum++; //1

      // console.log("将要显示的是:", this.pageNum);

      // 无限循环  判断 pageNum 超出最大值，就设置成0
      if (this.pageNum == 5) {
        this.pageNum = 0;
      }
      // this.oLiItems[this.pageNum].style.opacity = 1
      animate(this.oLiItems[this.pageNum], {
        opacity: 1,
      });

      this.showPointOfPageNum()
    }

    //播放上一张
    prev(){
      console.log("当前显示的是:", this.pageNum); //0
      console.log(this.oLiItems);
      // this.oLiItems[this.pageNum].style.opacity = 0
      animate(this.oLiItems[this.pageNum], {
        opacity: 0,
      });

      // 播放下一下
      this.pageNum--; //1

      console.log("将要显示的是:", this.pageNum);

      // 无限循环  判断 pageNum 超出最大值，就设置成0
      if (this.pageNum == -1) {
        this.pageNum = 4;
      }
      // this.oLiItems[this.pageNum].style.opacity = 1
      animate(this.oLiItems[this.pageNum], {
        opacity: 1,
      });

      this.showPointOfPageNum()
    }

    // 根据页码的值 控制小圆点的变化
    showPointOfPageNum(){
        this.pageNum;
        let pageLis = this.box.querySelectorAll('.page li')
        for(let i=0;i<pageLis.length;i++){
            pageLis[i].style.background = 'rgba(78, 77, 77, 0.301)';

        }
        pageLis[this.pageNum].style.background = 'white'


    }

  }
